---
group: 'hooks'
category: 'state'
title: 'useId'
description: 'Generate a random ID for memory'
order: 1
---

## Usage

useId generates a random ID that persists during rendering.
Hooks are typically used to bind input elements to tags.
The generated random id is saved into the ref and will not change unless the component is unloaded.

```jsx live=true
import { useId } from '@kubed/hooks';
import { Input } from '@kubed/components'

function MyInput({ id }) {
   const uuid = useId(id);

   return (
     <>
       <label htmlFor={uuid}>Input label</label>
       <Input type="text" id={uuid} />
     </>
   );
}

export default function App() {
   return (
     <div className="flex gap-3 items-center">
       // input and label will have id 'my-id'
       <MyInput id="my-id" />
       // input and label will have random id 'kubed-fZMoF'
       <MyInput />
     </div>
   );
}

```

## API

The useId hook accepts two parameters:

- `id` – the string value returned by default
- `generateId` – function for generating random IDs

Hook returns a string value, which can be either "id" (if the first argument is passed) or a random id generated using the "generateId" function.

```tsx
function useId(id: string, generateId?: () => string): string;
```

## Params

| Parameters | Default Value | Type | Description |
| --- | --- | --- | --- |
| id | - | `string` | The string value returned by default |
| generateId | - | `() => string` | Function to generate a random ID` |

## Result


| Parameters | Default Value | Type | Description |
| --- | --- | --- | --- |
| id | - | `string` | Generate a random ID for memory |
